<script>
	export default{
		name:'tabcontainer',
		data(){
			return{

			}
		},
		props:{
			panes:{
				type:Array
			}
		},
		render(){
			const contents = this.panes.map((pane,index) => {
				return pane.active ? pane.$slots.default :null
			})
			return(
					<div class='tab-container'>
						{ contents }
					</div>
				)
		}
	}
</script>
<style lang="less" scoped>
	.tab-container{
		width: 100%;
		ul{
				width: 90%;
				margin:0 auto;
			li{
				height: 115px;
			}
		}
	}
</style>